<template>
   <div class="app-container">
      <h4 class="form-header h4">基本信息</h4>
      <a-form :model="form" :labelCol="{ style: 'width: 80px' }">
         <a-row>
            <a-col :span="8" :offset="2">
               <a-form-item label="用户昵称" name="nickName">
                  <a-input v-model:value="form.nickName" disabled />
               </a-form-item>
            </a-col>
            <a-col :span="8" :offset="2">
               <a-form-item label="登录账号" name="userName">
                  <a-input v-model:value="form.userName" disabled />
               </a-form-item>
            </a-col>
         </a-row>
      </a-form>

      <h4 class="form-header h4">角色信息</h4>
      <a-table
          :loading="loading"
          :row-key="getRowKey"
          :custom-row="handleRow"
          ref="roleRef"
          :data-source="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
          :columns="columns"
          :pagination="false"
          :row-selection="{ selectedRowKeys: roleIds, onChange: handleSelectionChange }"
      >
        <template #bodyCell="{ column, text , record, index }">
          <template v-if="column.dataIndex === 'xh'">
            <span>{{ (pageNum - 1) * pageSize + index + 1 }}</span>
          </template>
          <template v-if="column.dataIndex === 'createTime'">
            <span>{{ parseTime(record.createTime) }}</span>
          </template>
        </template>
      </a-table>

      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />

      <a-form  :labelCol="{ style: 'width: 100px' }">
         <div style="text-align: center;margin-left:-120px;margin-top:30px;">
           <a-space>
             <a-button type="primary" @click="submitForm()">提交</a-button>
             <a-button @click="close()">返回</a-button>
           </a-space>
         </div>
      </a-form>
   </div>
</template>

<script setup name="AuthRole">
import { getAuthRole, updateAuthRole } from "@/api/system/user";

const route = useRoute();
const { proxy } = getCurrentInstance();

const loading = ref(true);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const roleIds = ref([]);
const roles = ref([]);
const form = ref({
  nickName: undefined,
  userName: undefined,
  userId: undefined
});
const columns = ref([
  { title: `序号`, dataIndex: 'xh',width: 80, align: 'center' },
  { title: `角色编号`, dataIndex: 'roleId' },
  { title: `角色名称`, dataIndex: 'roleName' },
  { title: `权限字符`, dataIndex: 'roleKey' },
  { title: `创建时间`, dataIndex: 'createTime', width: 180 },
])

// 点击选中行
function handleRow(record, index) {
  return {
    onClick: (event) => {
      let index
      if ((index = roleIds.value.indexOf(record.roleId)) === -1) {
        roleIds.value.push(record.roleId)
      } else {
        roleIds.value.splice(index, 1)
      }
    }
  }
}
/** 多选框选中数据 */
function handleSelectionChange(selectionRowKeys) {
  roleIds.value = selectionRowKeys;
}
/** 保存选中的数据编号 */
function getRowKey(row) {
  return row.roleId;
}
/** 关闭按钮 */
function close() {
  const obj = { path: "/system/user" }
  proxy.$tab.closeOpenPage(obj);
}
/** 提交按钮 */
function submitForm() {
  const userId = form.value.userId;
  const rIds = roleIds.value.join(",");
  updateAuthRole({ userId: userId, roleIds: rIds }).then(response => {
    proxy.$modal.msgSuccess("授权成功");
    close();
  });
}

(() => {
  const userId = route.params && route.params.userId;
  if (userId) {
    loading.value = true;
    getAuthRole(userId).then(response => {
      form.value = response.data.user;
      roles.value = response.data.roles;
      total.value = roles.value.length;
      nextTick(() => {
        roleIds.value = roles.value.filter(row => {
          return row.flag
        }).map(row => row.roleId);
      });
      loading.value = false;
    });
  }
})();
</script>
